<template>
  <div class="pages" style="width: 100%;height: auto;background: #EBEDEF;">
<!--    <van-icon name="arrow-left" size="30" style="position: absolute;top:0;left:5%;" @click.stop="addBox"/>-->
<!--    <div class="cartDetail" style="position: fixed;top:0;background:#fff;left:3%;z-index:9999;display: flex;justify-content: space-around;align-items: center;width: 100%">-->
<!--      <button class="goHomeMy" style="line-height: 26px;font-size: 37rpx;margin:0;background: #1989fa" @click="goHome">返回首页</button>-->
<!--      <button open-type="share" style="font-size: 37rpx" data-name="pageShare" class="shareBtn" @click="onShareAppMessage" >-->
<!--        发送名片-->
<!--      </button>-->
<!--    </div>-->
    <div class="cartPosition">
      <indexMb v-if="cardData.type==2" :widthItem="widthItem" :data="cardData" :empId="empId" ref="indexMb"></indexMb>
      <indexMb1  v-if="cardData.type==1" :widthItem="widthItem"  :data="cardData" :empId="empId" ref="indexMb1" ></indexMb1>
    </div>
    <div class="cartPosition">
      <div class="cartBox" v-if="!cardData.type">
        <p style="font-size: 38rpx;margin:20rpx 0 30rpx 0;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;"> 杭州市西湖区销帮网络技术有限公司</p>
        <div class="cart_top">
          <div class="cart_name">

            <p  style="font-family: 'KaiTi';color: #fff;font-weight: normal;margin-bottom:22rpx;margin-top:10rpx;">销帮客服</p>
            <p style="color: #fff;font-weight: normal;display: flex;justify-content: flex-start;align-items: center;box-sizing: border-box;padding-left: 24rpx;" >

              <span>电话:&nbsp;&nbsp;&nbsp;&nbsp;13116858811</span>
              <img style="width:23px;height:23px;color: #fff;margin-right:76rpx;" @click.stop="callPhone(data.mobile)" src="../../icons/svg/phone.svg"/>
<!--              <img src="../../../static/images/phone.png" alt="" style="width: 40rpx;height: 40rpx;margin-right: 12rpx;" @click.stop="callPhone('13116858811')">-->
            </p>

          </div>

        </div>
      </div>
    </div>
    <div class="createOut active" >


      <div class="create"  @click="createCard" v-if="!cartId" > 立即创建我的名片</div>
      <div class="create"  @click="uploudProjuct" v-if="cartId" > 上传产品</div>

      <div class="createShare">
        <button open-type="share" :disabled="!cartId" data-name="pageShare" id="share" @click="onShareAppMessage">
          发送名片
        </button>
      </div>

      <!--       <div class="samll">-->

      <!--&lt;!&ndash;        <img src="../../../static/images/creat.png" alt="">&ndash;&gt;-->
      <!--       </div>-->
      <!--       <span>立即创建</span>-->
    </div>
    <div class="conpanyDetail">
      <h2 class="title" style="margin-bottom: 20rpx;">公司名称【简介】</h2>

      <video
        class="video"
         id="myVideo"
       v-if="cardData.flag3&&cardData.flag3!=' '"
        :src="cardData.flag3"
        @play="bindplay"
        style="width: 100%;height: 250rpx;"></video>

      <p class="fontStyle" v-if="cartId">
        {{cardData.flag4}}
      </p>
      <p class="fontStyle" v-if="!cartId">
        这是一版电子名片，用于展示用自己的基本信息，并可以转发给自己的客户，以便后期联系和沟通.
      </p>
    </div>
    <getCartDetail ref="getCartDetail" :isMeIndex="isMeIndex" :cardId="1" :isLogin="cartId"></getCartDetail>

    <div class="tabs" style="margin-bottom: 30rpx;background: #fff" >
      <h2  class="title">最新动态</h2>
      <template v-if="NewMaterial.length">


        <div class="listBox"  v-for="(item,index) in NewMaterial" :key="index">
          <img :src="item.avatarUrl" alt="">
          <div class="list_content">
            <div class="content_top">
              <div>
                <p style="font-size: 30rpx;color:#000">{{item.nickName}}</p>
                <p style="font-size: 30rpx;color:#D1D1D1">{{item.createTime}}</p>
              </div>
              <!--                  <van-button type="primary" size="small">联系TA</van-button>-->
            </div>

            <div class="content_midd" >

              <img :src="item.imgUrl" alt="" style="width:80%" mode="aspectFill" @click="handleImagePreview(item.imgUrl)">
              <p class="content_midd_title" >{{item.description}}</p>
            </div>

          </div>
        </div>
        <div class="weui-loadmore" @click="gewhoSctMore" v-if="iscurrPage>0" style="padding-bottom: 20rpx;">
          <span class="weui-loadmore__tips" style="color:#FFB90F">加载更多--剩余{{iscurrPage}}页</span>
        </div>

        <div class="weui-loadmore weui-loadmore_line" style="margin: 0 auto;" v-if="outData">
          <span class="weui-loadmore__tips">已经到底了</span>
        </div>


      </template>
      <template v-if="!NewMaterial.length">
        <p  style="text-align: center;font-size: 28rpx;">
          暂无动态
        </p>
      </template>

    </div>

<!--    <div class="tabs" style="margin-bottom: 30rpx;background: #fff">-->
<!--      <h2  class="title">最新动态</h2>-->
<!--      <web-view src="https://www.baidu.com/"></web-view>-->
<!--    </div>-->

    <getUserinfo ref="getUserinfo" @getBtnType="getBtnTypeFun" :isShow="isShow" :empId="empId" @changeDom="changeDomFun"></getUserinfo>
  </div>
</template>

<script>

  import card from '@/components/card'
  import goHome from "../../components/goHome"
  import getCartDetail from "../../components/getCartDetail.vue"
  import indexMb from '../../components/indexMb.vue'
  import indexMb1 from '../../components/indexMb1.vue'
  import getUserinfo from '../../components/getUserinfoIndex'
   import {getOptions} from "../../utils/api.js"
  export default {
    name: 'index',
    data () {
      return {
        isOpen:true,
        loadMore:true,
        outData:false,
        cardData: {},
        result:[],
        iscurrPage:"",
        isSc:false,
        cartId:"",
        isShare:true,
        bgImg:"",
          isMeIndex:true,
        userInfo:{},
        pageNumNew:1,
        pageSizeNew:6,
        NewMaterial:[]
      }
    },
      onReady(){

          wx.setNavigationBarTitle({
              title: '首页'
          })
      //  this.getindexCard( wx.getStorageSync('cartId'), wx.getStorageSync('userId'))


      },

      onShow(){
        this.getindexCard( wx.getStorageSync('cartId'), wx.getStorageSync('userId'))

        this.cartId=wx.getStorageSync('cartId')
      },
    // 分享
    onShareAppMessage () {

      let shareData= JSON.parse(wx.getStorageSync('shareData'))
      // let Authorization= wx.getStorageSync('Authorization')
      let shareType=wx.getStorageSync('shareType')
      let cartId=wx.getStorageSync('cartId')
      let userId= wx.getStorageSync('userId')
      let shareUrl=wx.getStorageSync('shareUrl')
      let that = this;

      return {
        title:`您好,我是${shareData.company}的${shareData.name},请惠存`, // 转发后 所显示的title
        path: `/pages/index/main?cartId=${cartId}&userId=${userId}&img=${shareData.logo}&isCartId=2`, // 相对的路径
        imageUrl:shareData.logo,
        success: (res) => { // 成功后要做的事情
          //console.log(res.shareTickets[0])
          // console.log

          wx.getShareInfo({
            shareTicket: res.shareTickets[0],
            success: (res) => {
              //console.log(res)
              //console.log(that.setData.isShow)
            },
            fail: function (res) {
              // console.log(res)
            },
            complete: function (res) {
              //  console.log(res)
            }
          })
        },
        fail: function (res) {
          // 分享失败
          // console.log('分享失败' + res)
        }
      }


    },
    onPullDownRefresh(){
      this.pageNumNew=1;
      this.getindexCard( wx.getStorageSync('cartId'), wx.getStorageSync('userId'))

    },
      methods:{
        callPhone(phone){
          wx.makePhoneCall({
            phoneNumber: phone //仅为示例，并非真实的电话号码
          })
        },
        handleImagePreview (img) { // 预览图片
          let imgs= this.NewMaterial;
          let imgUrl=imgs.map((item)=>{
            return item.imgUrl
          });
          let index=0;
          imgUrl.forEach((a,i)=>{
            if(a==img){
              index=i;
            }
          })
          // console.log(index)

          // const images = [this.dataObj.imgUrl]
          // let arr = []
          // this.images.forEach((a, i) => {
          //   arr.push(a.imgUrl)
          // })
          // console.log(images)
          wx.previewImage({
            current: imgUrl[index], // 当前预览的图片
            urls: imgUrl // 所有要预览的图片
          })
        },
        uploudProjuct(){

          wx.navigateTo({ url: '/pages/createProduct/main' })
        },
        changeDomFun(data){//登陆成功后回调

          wx.setStorageSync('isEdit', 0)
          wx.navigateTo({ url: '/pages/createCard/main' })

          // this.getBanner()
          // this.getindexCard(userid)
        },
        createCard () {
          let userInfo = wx.getStorageSync('userInfo')
          if(userInfo){
            wx.setStorageSync('isEdit', 0)
            wx.navigateTo({ url: '/pages/createCard/main' })
          }else{
            this.$refs.getUserinfo.init(this.empId,1)
          }

        },
        gewhoSctMore(){
          this.loadMore=false;
          this.pageNumNew++;
          this.getNewMaterial();
        },
        bindplay(e){
          this.videoContext = wx.createVideoContext('myVideo',this);
          this.videoContext.requestFullScreen({ direction: 0 });
        },
        getNewMaterial(){//最新动态
          this.$http.request({
            method: 'post',
            url: `/api/material/getNewMaterialByCardId`,
            body: {
              "cardId": wx.getStorageSync('cartId'),
              "pageNum": this.pageNumNew,
              "pageSize": this.pageSizeNew
            }
          }).then((data)=>{
            if (data.code == 200) {
              this.result=data.data.list;


              if(wx.getStorageSync("userInfo")){
                this.userInfo=wx.getStorageSync("userInfo")&&JSON.parse(JSON.parse(wx.getStorageSync("userInfo")));
              }else{
                this.userInfo.avatarUrl=this.cardData.logo;
                this.userInfo.nickName=this.cardData.name;
              }
               this.iscurrPage=data.data.totalPage-data.data.currPage;
              if (this.pageNumNew == 1) {
                this.NewMaterial=data.data.list;
                if(this.result.length<6){
                  this.loadMore=false;
                  this.outData=true;
                }
                else{
                      this.loadMore=true;
                      this.outData=false;

                }
              }else{
                let isAdd=false;
               // console.log(this.NewMaterial)
               this.NewMaterial.forEach((a,i)=>{
                  let arr=data.data.list[0]
                    if(a.id==arr.id){
                      isAdd=false;
                    }else{
                       isAdd=true;
                    }

                })
                if(isAdd){
                   this.NewMaterial.push(...data.data.list);
                }

                if(this.result.length<6){

                  this.loadMore=false;
                  this.outData=true;
                } else{
                  this.outData=false;
                  this.loadMore=true;
                }
              }
              this.NewMaterial.forEach((a,i)=>{
                a.avatarUrl=this.userInfo.avatarUrl;
                a.nickName=this.userInfo.nickName;
              })
            }else{
              this.outData=false;
              this.loadMore=true;
            }
          })
        },
        getindexCard (cartId,userId) {
          //     let cartId= wx.getStorageSync('cartId')
          // let userId= wx.getStorageSync('userId')
          this.$http.request({
            method: 'get',
            url: `/api/card/detail`,
            body: {
              cardId:cartId||'',
              userId:userId||''
            }
          }).then((data) => {
            if (data.code == 200) {
              wx.stopPullDownRefresh()

              wx.setStorageSync('cartId', data.data.id)
              wx.setStorageSync('isVip', data.data.isVip)
              wx.setStorageSync('userId', data.data.userId)
              this.cartId=wx.getStorageSync('cartId')

              // this.getcardForward();
              this.isCart = true
              this.cardData = data.data;
              let bgId="",objBg={};
              if(this.cardData.flag4){
               bgId=this.cardData.flag4.split('*')[1];
                this.cardData.flag4=this.cardData.flag4.split('*')[0];
                if(bgId){
                  objBg=getOptions().filter((item)=>{
                    return item.id==bgId;
                  })[0];
                  if(objBg){
                    this.cardData.bgUrl=objBg.url;
                 //   console.log(this.cardData.bgUrl)
                  }else{
                    this.cardData.bgUrl="https://img.xbdzmp.com/20200428111831d75990ae5f0b.jpg";
                  }
                }else{
                   this.cardData.bgUrl="https://img.xbdzmp.com/20200428111831d75990ae5f0b.jpg";
                }

              }else{
                  this.cardData.bgUrl="https://img.xbdzmp.com/20200428111831d75990ae5f0b.jpg";
              }


              this.getNewMaterial()
              let obj={};
              obj.logo=data.data.logo;
              obj.name=data.data.name;
              obj.company=data.data.company;
              wx.setStorageSync('shareData', JSON.stringify(obj));
            } else {
              this.cardData = ''
              // wx.showToast({
              //   title: `${data.message}`,
              //   icon: 'none',
              //   duration: 2000
              // })
            }
          })
        },
        goHome(){
          wx.reLaunch({
            url: '/pages/index/main'
          })
        },
          addBox () {
              // if(this.isMeIndex){
              //     wx.navigateTo({ url: '/pages/index/main' })
            wx.reLaunch({
              url: '/pages/index/main'
            })
              // }else{
              //     let shareData= JSON.parse(wx.getStorageSync('shareData'))
              //     let Authorization= wx.getStorageSync('Authorization')
              //     let cartId=wx.getStorageSync('cartId')
              //     let userId= wx.getStorageSync('userId')
              //     wx.reLaunch({url:`/pages/index/main?Authorization=${Authorization}&cartId=${cartId}&userId=${userId}`})
              // }

          },
      },
    // 分享

    components:{
      getCartDetail,
      goHome,
      indexMb,
      indexMb1,
      getUserinfo
    }


  }
</script>
<style>
  .cartDetail .van-button__text{
    font-size: 37rpx;
  }
</style>
<style scoped>
  .cartBox{
    width: 90%;
    height:400rpx ;
    /*background-color: #;*/
    overflow: hidden;
    color:#fff;
    transition: all 0.5s;
    margin:0 auto;
    position: relative;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #999;
    border: 1px solid #000;
    /*border: 5px solid rgb(61,176,243);*/
    /*border-bottom: 5px solid rgb(61,176,243);*/
    box-sizing: border-box;
    padding:25rpx;
    /*background:#f7f7f7 url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577982769895&di=2b65bd6b72e73c15f936d4ddfedaaccf&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F52%2F00%2F6357931b6ead28e.jpg") no-repeat;*/
    background:#f7f7f7 url("https://img.xbdzmp.com/20200428111831d75990ae5f0b.jpg") no-repeat;
    background-size: auto;
  }
  .cartBox .weui-uploader__file_status:before{
    background-color:transparent ;
  }
  .cartBox.active ._van-icon{
    top:537rpx;
  }
  .cartBox .weui-uploader__file{
    width:  150rpx;
    height: 150rpx;
    border-radius: 20rpx;
    margin-top:5rpx;
    /*background:url() no-repeat;*/
    /*background: url("../../../static/images/header.png") no-repeat;*/
  }
  .cartBox ._van-icon{
    width: 20px;
    height: 20px;
    position:absolute;
    top:337rpx;
    right:48%;
  }
  .cartBox .more{
    text-align: right;
    position: absolute;
    right: 30rpx;
    bottom:13rpx;
    font-size: 28rpx;
  }
  .cartBox .weui-uploader__file_status:before{
    background-color:transparent ;
  }
  .cart_name>p:first-child{
    margin-bottom: 30rpx;
    font-size: 45rpx;
  }
  .cartBox .weui-uploader__file{
    width:  150rpx;
    height: 150rpx;
    border-radius: 20rpx;
    margin-top:5rpx;
  }
  .createOut{
    width: 100%;
    height:80rpx ;
    margin-top:40rpx;
    /* position: fixed;
    right:5% ;
    bottom:3%; */
    /*background: rgb(63,176,244);*/
    transition: all 1s;
    border-radius: 20px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    box-sizing: border-box;
    padding-right:20rpx;
    font-size: 36rpx;
    text-align: center;
  }
  .pages .title{
    text-align: left;
    box-sizing: border-box;
    padding-left: 40rpx;
    position: relative;
    margin-bottom: 40rpx;
  }
  .pages .title:before{
    content:"" ;
    width: 10rpx;
    height: 20px;
    background: #10AEFF;
    position: absolute;
    top:7rpx;
    left:17rpx;
  }
  .listBox{
    width: 100%;
    background: #fff;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    padding:10rpx 20rpx;
    display: flex;
    justify-content: space-between;
  }
  .content_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .content_midd_title{
    font-size: 28rpx;
    width: 100%;
    color:#000;
    margin-top: 10rpx;
    /*display: -webkit-box;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    word-wrap: break-word;
    /*white-space: normal !important;*/
    /*-webkit-line-clamp: 2;*/
    /*-webkit-box-orient: vertical;*/

  }
  .list_content{
    width: 85%;

  }
  .listBox>img{
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;

  }
  .fontStyle{
    font-family: 'KaiTi';
    text-indent:40rpx;
  }
   .conpanyDetail{
     background: #fff;
     width: 100%;
     margin-top:40rpx;
     box-sizing: border-box;
     padding:10rpx;
   }
   .conpanyDetail .title:before{
     left: 7rpx;
   }
  .shareBtn{
    background-color: #07c160;
    border:none;
    height:70rpx;
    width: 200rpx;
    line-height:58rpx;
    font-size: 30rpx;
    display: initial;
    color: #fff;
    box-sizing: border-box;
    padding:10rpx 0;
    margin-left: 30rpx;
  }
 .shareBtn:after{
    border:none;
  }
  .openItem {
    width: 100%;
    height: 0;

    overflow: hidden;
    transition: all 0.6s;
  }

  .openItem.active {
    padding: 30rpx 0;
    width: 100%;
    height: auto;
    transition: all 0.6s;
  }

  .product {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 20rpx;
    font-size: 28rpx;
  }

  .product>.product_list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .product>.product_list>li {
    width: 45%;
    box-sizing: border-box;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    box-shadow: 5px 5px 5px rgb(251, 251, 251);
  }

  .product>.product_list>li>p {
    text-align: center;
  }

  .product>.product_list>li>img {
    border: 1px solid #ddd;
    width: 100%;
  }

  .pages>.title {
    box-sizing: border-box;
    padding-left: 5%;
    text-align: left;
    line-height: 80rpx;
    color: rgb(171, 171, 173);
  }
  .createShare{
    width: 45%;
    height: 100%;
    background: #3cc51f;
    margin-left: 25rpx;
    color: #fff;
    line-height: 80rpx;
  }
  .create{
    background: #fff;
    border:1px solid #3cc51f;
    width: 45%;
    height: 100%;
    text-align: center;
    border-radius: 5px;
    color: #3cc51f;
    line-height: 80rpx;
    box-sizing: border-box;
    padding-right:20rpx;
    font-size: 32rpx;
    text-align: center;
    /*padding-left: 20rpx;*/
  }
  .card {
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 20rpx;
  }

  .cardText img {
    width: 40rpx;
    height: 40rpx;
    margin-right: 30rpx;
  }

  .cardText .cardTop {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 32rpx;
  }

  .card_name span {
    display: block;
    font-size: 30rpx;
  }

  .card_name span:first-child {
    font-size: 50rpx;
    margin-top: 20rpx;
  }

  .btn_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin-top:40rpx;*/
  }

  .list {
    font-size: 26rpx;
  }

  .list>li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .list>li>img {
    width: 20rpx;
    height: 20rpx;
  }

  .cardBox {
    width: 90%;
    height: 400rpx;
    background: rgb(248, 248, 248);
    margin: 0 auto;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 20rpx 40rpx;
    box-shadow: 5px 5px 5px #999;
    display: flex;
    justify-content: space-between;
    position: relative;

  }

  .addCard {
    position: absolute;
    bottom: 0;
    right: 20rpx;
    width: 100rpx;
    height: 100rpx;
    background: rgb(174, 174, 174);
    border-radius: 50%;
    text-align: center;
    line-height: 100rpx;
  }
  .goHomeMy{

    border:none;
    width: 200rpx;
    height: 70rpx;

    line-height:77rpx;
    font-size: 30rpx;
    display: initial;
    color: #fff;
    box-sizing: border-box;
    padding:10rpx 0;
    margin-left: 30rpx;
  }
  .addCard>img {
    width: 80rpx;
    height: 80rpx;
  }

  .cardBox>p>img {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
  }
  #share{
    width: 100%;
    height: 100%;
    background-color: transparent;
    border:none;
    padding-left: 0;
    padding-right: 0;
    line-height: 80rpx;
    font-size: 30rpx;
    display: initial;
    color: #fff;
    box-sizing: border-box;
    padding:10rpx 0;
  }
  #share:after{
    border:none;
  }
  .box{
        width: 74rpx;
        height:120rpx;
      background-color: rgba(255,255,255,.5);

        /* border: 1px solid rgb(61,176,243); */
    border:1px solid rgb(61,176,243);
        border-radius: 30rpx;
        position: fixed;
        bottom:10rpx;
        right: 5%;
        font-size: 22rpx;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        text-align: center;
        transform :translateY(-60rpx);
      }
      .box>li{
        width: 100%;

      }

      #share:after{
        border:none;
      }
      .box>li:first-child{
        margin-bottom: 10rpx;
      }
      .box img{
        width: 40rpx;
        height: 40rpx;
        margin-top:26rpx;
      }
</style>
